<template>
	<div class="control-content app-control-menu__content">
		<a-card
			v-for="(menu, index) in menus"
			:key="index"
			:bordered="false"
			v-show="!menu.hidden"
			class="app-control-menu__group"
		>
			<template #title>
				<slot
					v-if="hasSlot(menu.name)"
					:item="menu" 
					:counterData="props.counterData"
					:name="menu.name">
				</slot>
				<slot
					v-else-if="hasSlot('MenuTitle')"
					:item="menu" 
					:counterData="props.counterData"
					name="MenuTitle">
				</slot>
				<p v-else class="app-control-menu__group__caption">
					{{ menu.caption }}
				</p>
			</template>
			<div class="app-control-menu__group__content">
				<template v-for="(item, _index) in menu.menuItems" :key="_index">
					<slot
						v-if="hasSlot(item.name)"
						:item="item" 
						:counterData="props.counterData"
						:actions="{ handleMenuClick }"
						:name="item.name">
					</slot>
					<slot
						v-else-if="hasSlot('MenuBody')"
						:item="item" 
						:counterData="props.counterData"
						:actions="{ handleMenuClick }"
						name="MenuBody">
					</slot>
					<a-card
						v-else
						class="app-control-menu__item"
						v-if="!item.hidden"
						@click="handleMenuClick(item)"
					>
						<AppIconText
							:imgPath="item.imgPath"
							:iconClass="item.iconClass"
						></AppIconText>
						<span class="app-control-menu__item__caption">{{
							item.caption
						}}</span>
					</a-card>
				</template>
			</div>
		</a-card>
	</div>
</template>
<script lang="ts" setup>
import { MenuProps } from '../menu';
const props = defineProps(MenuProps);
const emit = defineEmits(['menuClick']);
const handleMenuClick = (item: any) => {
	emit('menuClick', item.name);
};
const hasSlot = (name: string): boolean => {
	return !!useSlots()[name];
};
watch(
	() => props.counterData,
	(newData) => {}
);
</script>
